<template>
  <div ref="outerHeaderBox"
       style="position: relative;width: 100%;z-index: 3;background: white;overflow: hidden"
       :style="{height:boxHeight + 'px'}">
    <div ref="headerTranslateBox" style="position: absolute;bottom:0;width: 100%">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  //  import HeaderEle from './index.vue'

  export default {
    data () {
      return {
        speed: 20,
        boxHeight: 0,
        maxHeight: 60,
      }
    },
    components: {
//      Header
    },
    methods: {
      getContentSize () {
      },
      touchEnd () {
        var boxHeight = this.boxHeight
        var position
        if (this.boxHeight == 0 || boxHeight == this.maxHeight) {

        } else if (boxHeight * 2 >= this.maxHeight) {
          position = this.scrolly - this.maxHeight + boxHeight
          position = Math.floor(position)
          this.goPosition(position)
        } else {
          position = this.scrolly + this.maxHeight - boxHeight
          position = Math.ceil(position)
          this.goPosition(position)
        }
      },
      goPosition(data) {
        window.PSEvent.trigger('verticalScrollGoPosition', data)
      }
    },
    computed: {
      scrolly () {

        return this.$store.state.cjy.pagePosY
      },
      env() {
        return window.environment;
      },
    },
    watch: {
      scrolly(newData, oldData) {

        if (this.env == 'edit') {
          console.log(this.env,'this.env')
          return
        }
        var changeData = oldData - newData
        var boxHeight = this.boxHeight
        boxHeight = Math.max(changeData + boxHeight, 0)
        this.boxHeight = Math.min(boxHeight, this.maxHeight)
      }
    },
    mounted () {
      this.$nextTick(() => {
        var headerBox = this.$refs.headerTranslateBox
        var maxHeight = headerBox.offsetHeight
        this.boxHeight = maxHeight
        this.maxHeight = maxHeight
        window.PSEvent.listen('scrollEnd', this.touchEnd)
      })
    },
    beforeDestroy () {
      window.PSEvent.remove && window.PSEvent.remove('scrollEnd', this.touchEnd)
    },
    updated () {
//      PSEvent.trigger('headerHeightOnChange')
    }

  }
</script>

<style>

</style>
